<template>
  <div class="daoer" style="height: 100%;">
    <header>

    </header>

    <section style="overflow-y: auto; height: 100%;">
      <el-collapse v-model="activeName" accordion @change="changeItem">
        <el-collapse-item v-for="(item,index) in parkList" :name="index">
          <template slot="title">
            {{ item.parkName}}
            <el-button type="primary" size="mini" @click.stop="updataRules(item,index)" style="position: absolute;right: 50px;">拉取规则</el-button>
          </template>
          <el-table :data="monthRuleList" border>
            <el-table-column label="拉取名称" prop="monthName" width="180px" align="center"></el-table-column>
            <!-- <el-table-column label="规则内容" prop="remark" align="center"></el-table-column> -->
            <!-- <el-table-column label="规则名称" width="120px" prop="monthRentName" align="center">
              <template slot-scope="scope">
                <el-input size="mini" @change="updateMonthRulePull(scope.row)" v-model="scope.row.monthRentName"></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="匹配规则" align="center" width="180px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.uniformRentType" @change="changeRule($event, scope.row)" placeholder="未匹配">
                  <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code"> </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="B端展示状态" prop="status" width="120px" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.ownerStatus"
                  active-color="#409EFF"
                  inactive-color="#C0CCDA"
                  @change="switchStatus($event,scope.row)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="天数" width="120px" prop="days" align="center">
              <template slot-scope="scope">
                {{ scope.row.days }}
                <!-- <el-input size="mini" v-model="scope.row.days"></el-input> -->
              </template>
            </el-table-column>
            <el-table-column label="车场售价" width="120px" prop="parkAmount" align="center">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.parkAmount"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="平台售价" width="120px" prop="" align="center">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.amount"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="起止时间" align="center" width="280px">
              <template slot-scope="scope">
                <el-time-picker
                  :disabled="!(scope.row.uniformRentType==100 || scope.row.uniformRentType==110)"
                  v-model="scope.row.beginTime"
                  value-format="HH:mm"
                  style="width: 118px;"
                  format="HH:mm"
                  placeholder="开始时间">
                </el-time-picker>
                <el-time-picker
                  :disabled="!(scope.row.uniformRentType==100 || scope.row.uniformRentType==110)"
                  v-model="scope.row.endTime"
                  value-format="HH:mm"
                  format="HH:mm"
                  style="width: 118px;"
                  placeholder="结束时间">
                </el-time-picker>
              </template>
            </el-table-column>
            <el-table-column label="C端展示状态" width="120px" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.clientStatus"
                  active-color="#409EFF"
                  inactive-color="#C0CCDA"
                  @change="switchStatus($event,scope.row)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120px">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="updateMonthRulePull(scope.row)">确认添加</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </section>

    <footer>

    </footer>



  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: null,
        parkList: [],
        activeName: '1',
        monthRuleList: [],
        searchForm: {
          page: 1,
          size: 10
        },
        // oldUniformRentType: null,
        selectedRow: null,
        options: [],
        ruleTime: [],
        // ifSubmit: false
      }
    },
    mounted() {
      this.getParkList();//  获取停车场列表
      this.getOption();
    },
    methods: {
      /**
       * 获取停车场列表
       */
      getParkList() {
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule-pull/getMonthRuleGroupByPark',
          data: this.searchForm
        }).then((res) => {
          this.parkList = res.data.records;
        })
      },

      updataRules(item,index) {
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule-pull/update-park-month-rule',
          data: this.$qs.stringify({parkId: item.parkId})
        }).then(res => {
          if(res.code == 200) {
            this.$message.success('更新规则成功');
            this.changeItem(index);
          } else {
            this.$message.warning(res.desc)
          }
        })
      },

      getOption() {
        this.$axios({
          method: 'get',
          url: '/promotion/month-rule/getMonthRuleType'
        }).then((res) => {
          if(res.code == 200) {
            this.options = res.data;
          }
        })
      },

      seeRule(row) {
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule-pull/getParkMonthRuleByParkId',
          data: this.$qs.stringify({parkId: row.parkId})
        }).then((res) => {
          res.data.forEach(item => {
            item.clientStatus = item.clientStatus == 1 ? true : false;
            item.ownerStatus = item.ownerStatus == 1 ? true : false;
            if(item.beginTime != null && item.endTime != null) {
              item.beginTime= item.beginTime.slice(11,16);
              item.endTime= item.endTime.slice(11,16);
            }
          })
          this.monthRuleList = res.data;
        })
      },
      /**
       * 开启关闭
       */
      switchStatus(e,row) {
        this.updateMonthRulePull(row);
      },

      updateMonthRulePull(updateForm) {
        let url;
        if(updateForm.ruleId == null) {
          url = "/promotion/month-rule-pull/add-month-rule"
        } else {
          url = "/promotion/month-rule-pull/update-month-rule"
        }
        if(updateForm.days != null && updateForm != '' && (updateForm.uniformRentType != null && updateForm.uniformRentType != '') && (updateForm.parkAmount != null && updateForm.parkAmount != '') && (updateForm.amount != null && updateForm.amount != '') && (updateForm.monthRentName != null && updateForm.monthRentName != '')) {
          this.form = JSON.parse(JSON.stringify(updateForm))
          this.form.ownerStatus = updateForm.ownerStatus == true ? 1 : 0;
          this.form.clientStatus = updateForm.clientStatus == true ? 1 : 0;
          this.form.pullId = updateForm.id;
          this.$axios({
            method: 'post',
            url: url,
            data: this.form
          }).then((res) => {
            if(res.code == 200) {
              this.$message.success('修改信息成功');
              this.seeRule(updateForm);
            } else {
              // oldUniformRentType
              // this.selectedRow.uniformRentType
              this.$message.warning(res.desc)
            }
          })
        } else {
          this.$message.warning('请输入完整信息')
        }
      },
      /**
       * 选择日期
       */
      // changeTime(row) {
      //   console.log(row)
      //   // if((row.beginTime && row.endTime) || (row.beginTime == null && row.endTime == null)) {
      //   //   this.updateMonthRulePull(row);
      //   // }
      // },
      /**
       * 监听数据变化
       */
      changeRule(value, row) {
        this.selectedRow = row
        let rule = this.options.filter((option) => {
          return option.code == value;
        });
        row.uniformRentType = value;
        row.monthRentName = rule[0].name;
        row.days = rule[0].days;
      },

      changeItem(index) {
        if(this.parkList[index]) {
          this.seeRule(this.parkList[index])
        }
      }
    }
  }
</script>

<style scoped>
  .el-collapse-item {
    position: relative;
  }



</style>
